<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>supplementary dojo.position() tests</title>
		<style type="text/css">
			@import "../../resources/dojo.css";
		</style>
		<script type="text/javascript" 
			src="../../dojo.js" 
			data-dojo-config="isDebug: false"></script>
		<script type="text/javascript">
			function onButtonClick(){
				/* position a red square over pressed button */
				var pos = dojo.position(this, true);
				var marker = document.createElement('div');
				document.body.appendChild(marker);
				marker.className = "marker";
				marker.style.position="absolute";
				marker.style.top = pos.y+"px";
				marker.style.left = pos.x+"px";
				console.log(marker);
				return false;
			}
				
			dojo.addOnLoad(function(){
				dojo.query("body")[0].scrollTop = 50;
				dojo.query("div").forEach("item.scrollTop = 50;");
				dojo.query("button").attr("onclick", onButtonClick);
				
				/***
					benchmark code
				var buttons = dojo.query("button");
				var start = new Date();
				for(var i=0; i<100; i++){
					for(var j=0; j<buttons.length; j++) dojo.position(buttons[j]);
				}
				alert("benchmark: "  + (new Date() - start));
				****/
			});
		</script>
		<style type="text/css">
			html {
				padding: 3px;
				margin: 3px;
				border: 7px solid yellow;
			}
			body {
				padding: 10px;
				margin: 20px;
				border: 9px solid blue;
			}

			.marker {
				/* little red square that goes on top of button (assuming _abs() is working) */
				position: absolute;
				overflow: hidden;
				width: 10px;
				height: 10px;
				border: none;
				margin: 0px;
				padding: 0px;
				background-color: red;
			}

			button {
				position: absolute;
			}
			
			div {
				position: absolute;
				border: 17px solid gray;
				padding: 37px;
				margin: 29px;
				overflow: auto;
			}

		</style>
	</head>
	<body>
		<h1>supplementary dojo.position() tests</h1>
		<button style="top: 100px; left: 200px;">click</button>
		<button style="top: 900px; left: 200px;">click</button>
		<div id="outer" style="position: absolute; top: 300px; left: 100px; height: 400px; width: 600px;">
			<button style="top: 50px; left: 200px;">click2</button>
			<div id="middle" style="position: absolute; top: 100px; left: 100px; height: 400px; width: 400px; border-width:13px 11px 23px 7px;">
				<div id="staticDiv" style="position: static; margin-top: 20px;">
					<button style="position: static;">click3</button>
					<br><br><br><br><br>
					<button style="top: 50px; left: 200px;">click4</button>
				</div>					
				<div id="inner" style="position: absolute; top: 150px; left: 100px; height: 470px; width: 200px;">
					<button style="position: static;">click5</button>
					<button style="top: 500px; left: 100px;">click6</button>
				</div>
				<button style="position: static;">click7</button>
				<button style="position: relative; top: 10px; left: 10px;" id="click8">click8</button>
				<button style="top: 300px; left: 200px;">click9</button>
			</div>
		</div>
	</body>
</html>

